<template>
	<div class="keywords-table">
		<!-- 表格 -->
		<el-table :data="keywordsList" border stripe>
			<el-table-column prop="id" label="id"></el-table-column>
			<el-table-column label="关键字">
				<template slot-scope="scope">
					{{ scope.row.keyword.join() }}
				</template>
			</el-table-column>
			<el-table-column
				prop="content"
				:label="keyword ? '回复内容' : '音效地址'"
			>
			</el-table-column>
			<el-table-column label="操作" width="150" class-name="table-btn">
				<template slot-scope="scope">
					<el-button type="primary" @click="editRow(scope.row)"
						>编辑</el-button
					>
					<el-popconfirm
						title="确认删除此项？"
						@confirm="deleteRow(scope.row)"
					>
						<el-button slot="reference" type="danger"
							>删除</el-button
						>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>

		<!-- 弹出框 -->
		<el-dialog
			:title="editOrAdd ? '编辑' : '添加'"
			:visible.sync="dialogFormVisible"
			@close="closeDialog"
		>
			<el-form :model="dialogForm" label-position="top">
				<el-form-item label="关键词">
					<el-tag
						size="default"
						v-for="tag in dialogForm.keyword"
						:key="tag"
						closable
						:disable-transitions="true"
						@close="handleClose(tag)"
					>
						{{ tag }}
					</el-tag>
					<el-input
						class="input-new-tag"
						v-if="inputVisible"
						v-model="inputValue"
						ref="saveTagInput"
						@keyup.enter.native="handleInputConfirm"
						@blur="handleInputConfirm"
					>
					</el-input>
					<el-button v-else class="button-new-tag" @click="showInput"
						>+ 新增关键词</el-button
					>
				</el-form-item>
				<el-form-item :label="keyword ? '回复内容' : '音效地址'">
					<el-input
						v-model="dialogForm.content"
						autocomplete="off"
						:maxlength="keyword ? '10' : ''"
						show-word-limit
						clearable
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeDialog">取 消</el-button>
				<el-button type="primary" @click="addRow">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { nanoid } from "nanoid";
export default {
	data() {
		return {
			// 关键词列表
			keywordsList: !!+localStorage.getItem("liveKeyword")
				? JSON.parse(
						localStorage.getItem("automaticReplyKeywordsList")
				  ) || []
				: JSON.parse(localStorage.getItem("soundEffectKeywordsList")) ||
				  [],
			// 显示哪个关键词列表
			keyword: !!+localStorage.getItem("liveKeyword"),
			// 弹出框显隐藏
			dialogFormVisible: false,
			// 弹出框表单
			dialogForm: {
				id: "",
				keyword: [],
				content: "",
			},
			// 输入框显隐
			inputVisible: false,
			// 输入框内容
			inputValue: "",
			// 编辑还是新增
			editOrAdd: true,
		};
	},

	mounted() {
		this.createContextmenu();
	},
	methods: {
		// 创建右键菜单
		createContextmenu() {
			const rightTemplate = [
				{
					label: "新建",
					accelerator: "ctrl+n",
					click: () => {
						this.editOrAdd = false;
						this.dialogForm = {
							id: "",
							keyword: [],
							content: "",
						};
						this.dialogFormVisible = true;
					},
				},
			];
			// 全局注册 快捷键
			this.$electron.remote.globalShortcut.register("ctrl+n", () => {
				this.editOrAdd = false;
				this.dialogForm = {
					id: "",
					keyword: [],
					content: "",
				};
				this.dialogFormVisible = true;
			});
			const menu = new this.$electron.remote.Menu.buildFromTemplate(
				rightTemplate
			);
			window.addEventListener("contextmenu", (e) => {
				e.preventDefault();
				menu.popup({
					window: this.$electron.remote.getCurrentWindow(),
				});
			});
		},

		// 删除一项tag
		handleClose(tag) {
			this.dialogForm.keyword.splice(
				this.dialogForm.keyword.indexOf(tag),
				1
			);
		},

		// 显示tag输入框
		showInput() {
			this.inputVisible = true;
			this.$nextTick(() => {
				this.$refs.saveTagInput.$refs.input.focus();
			});
		},

		// tag输入框提交
		handleInputConfirm() {
			if (this.inputValue) {
				this.dialogForm.keyword.push(this.inputValue);
			}
			this.inputVisible = false;
			this.inputValue = "";
		},

		// 编辑某一项
		editRow(row) {
			this.editOrAdd = true;
			this.dialogForm = row;
			this.dialogFormVisible = true;
		},

		// 删除某一项
		deleteRow(row) {
			const index = this.keywordsList.findIndex(
				(item) => row.id == item.id
			);
			this.keywordsList.splice(index, 1);
			this.keyword
				? localStorage.setItem(
						"automaticReplyKeywordsList",
						JSON.stringify(this.keywordsList)
				  )
				: localStorage.setItem(
						"soundEffectKeywordsList",
						JSON.stringify(this.keywordsList)
				  );
		},

		// 弹出框提交
		addRow() {
			if (this.dialogForm.content && this.dialogForm.keyword.length) {
				// 如果是编辑
				if (this.editOrAdd) {
					this.keywordsList.forEach((item) => {
						if (item.id == this.dialogForm.id) {
							item = this.dialogForm;
						}
					});
				} else {
					// 如果是添加
					this.keywordsList.push({
						...this.dialogForm,
						id: nanoid(),
					});
				}
				this.keyword
					? localStorage.setItem(
							"automaticReplyKeywordsList",
							JSON.stringify(this.keywordsList)
					  )
					: localStorage.setItem(
							"soundEffectKeywordsList",
							JSON.stringify(this.keywordsList)
					  );
				this.dialogFormVisible = false;
			} else {
				this.$message.error("请填写完整再提交！");
			}
		},

		// 弹出框关闭
		closeDialog() {
			(this.keywordsList = !!+localStorage.getItem("liveKeyword")
				? JSON.parse(
						localStorage.getItem("automaticReplyKeywordsList")
				  ) || []
				: JSON.parse(localStorage.getItem("soundEffectKeywordsList")) ||
				  []),
				(this.dialogFormVisible = false);
		},
	},
};
</script>

<style lang="scss">
.keywords-table {
	overflow: auto;
	height: calc(100vh - 56px);
	padding: 20px;
	.table-btn {
		.cell {
			display: flex;
			justify-content: space-between;
		}
	}
	.el-dialog__wrapper {
		.el-dialog {
			width: 360px;
			.el-tag {
				margin: 0 5px 5px 0;
			}
		}
	}
}
</style>
